<template>
  <div class="home">
    <router-view></router-view>
	<div class="bottom_div">
		<div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
			<router-link :to="item.to">
			<img :src="index==selected?item.activeUrl:item.url" />
			<p :class="{color_active:index==selected}">{{item.text}}</p>
			</router-link>
		</div>
	</div>
  </div>
</template>

<script>
    export default{
		data(){
			return{
				tabList:[
					{
						url:require("../assets/home/tab_home.png"),
						activeUrl:require("../assets/home/tab_home_active.png"),
						text:"首页",
						to:"/home"
					},
					{
						url:require("../assets/home/tab_shopcart.png"),
						activeUrl:require("../assets/home/tab_shopcart_active.png"),
						text:"购物车",
						to:"/home/shopcart"
					},
					{
						url:require("../assets/home/tab_orders.png"),
						activeUrl:require("../assets/home/tab_orders_active.png"),
						text:"订单",
						to:"/home/orders"
					},
					{
						url:require("../assets/home/tab_mine.png"),
						activeUrl:require("../assets/home/tab_mine_active.png"),
						text:"我的",
						to:"/home/mine"
					}
				],
				selected:0
			}
		},
		methods:{
			change:function(index){
				this.selected=index;
			}
		}
	}
</script>
<style>
	.bottom_div{
		background: #f1f1f1;
		height: 49px;
		position: fixed;/* 固定定位  相对于浏览器来说*/
		bottom: 0;
		width: 100%;	
		display: flex;
		align-items: center;/* 上下排列居中 */
	}
	.bottom_div .tab_div{
		text-align: center;
		flex: 1;
	}
	.tab_div img{
		height: 20px;
		width: 20px;
	}
	.tab_div p{
		font-size: 10px;
		color: #333333;
	}	
	.tab_div .color_active{
		color: #1FA4FC;
	}
</style>